<template>
    <div class="profileComponent">
        <div class="clip-tools_pan">
            剖面操作面板
        </div>
        <div class='clip-tools_body'>
            <div class="clip-tools_body-item">
                <label for="">X:</label>
                <input type="checkbox" id="checkX" checked>
                <input type='range' id='rangeX'>
            </div>
            <div class="clip-tools_body-item">
                <label for="">Y:</label>
                <input type="checkbox" id="checkY">
                <input type='range' id='rangeY'>
            </div>
            <div class="clip-tools_body-item">
                <label for="">Z:</label>
                <input type="checkbox" id="checkZ">
                <input type='range' id='rangeZ'>
            </div>
        </div>
    </div>
</template>

<script>
    import * as xeogl from '@/libs/xeogl/base/xeogl.module'

    let xClipHelper, yClipHelper, zClipHelper, clipX, clipY, clipZ

    export default {
        name: "showProfile",
        data:function () {
            return {
                showProfile: false
            }
        },
        props: [
            'currentTool'
        ],
        methods: {
            displayProfile: function() {
                let xMin = GOLOAlBAL_OPEOBJ.scene.aabb[0];
                let yMin = GOLOAlBAL_OPEOBJ.scene.aabb[1];
                let zMin = GOLOAlBAL_OPEOBJ.scene.aabb[2];
                let xMax = GOLOAlBAL_OPEOBJ.scene.aabb[3];
                let yMax = GOLOAlBAL_OPEOBJ.scene.aabb[4];
                let zMax = GOLOAlBAL_OPEOBJ.scene.aabb[5];

                this.showProfile = !this.showProfile
                if(!this.showProfile) {
                    xClipHelper.destroy();
                    yClipHelper.destroy();
                    zClipHelper.destroy();
                    clipX.destroy();
                    clipY.destroy();
                    clipZ.destroy();
                } else {
                    // x
                    clipX = new xeogl.Clip({
                        id: 'x',
                        pos: [xMin, yMin, (zMax + zMin) / 2],
                        dir: [1, 0, 0],
                        active:true
                    })

                    // y
                    clipY = new xeogl.Clip({
                        id: 'y',
                        pos: [(xMax + xMin) / 2, yMin, zMin],
                        dir: [0, 0, 1],
                        active:true
                    })

                    // z
                    clipZ = new xeogl.Clip({
                        id: 'z',
                        pos: [(xMax + xMin) / 2, yMin, (zMax + zMin) / 2],
                        dir: [0, 1, 0],
                        active:true
                    })

                    xClipHelper = new xeogl.ClipHelper({
                        clip: clipX,
                        planeSize: [zMax - zMin, xMax - xMin],
                        autoPlaneSize: false,
                        visible: true,
                        solid: true // Filled planes
                    });

                    yClipHelper = new xeogl.ClipHelper({
                        clip: clipY,
                        planeSize: [xMax - xMin, xMax - xMin],
                        autoPlaneSize: false,
                        visible: false,
                        solid: true // Filled planes
                    });

                    zClipHelper = new xeogl.ClipHelper({
                        clip: clipZ,
                        planeSize: [xMax - xMin, zMax - zMin],
                        autoPlaneSize: false,
                        visible: false,
                        solid: true // Filled planes
                    });

                    // 添加对X剖面的控制
                    let rangeX = document.getElementById('rangeX');
                    rangeX.value = 0;
                    rangeX.setAttribute('min', 0);
                    rangeX.setAttribute('max', Math.abs(xMax) + Math.abs(xMin));

                    rangeX.addEventListener('input', function(e) {
                        let value = e.target.value;
                        let valueOfPercent = (Math.abs(value) / (Math.abs(xMax) + Math.abs(xMin))) * 100;
                        rangeX.style['background-size'] = valueOfPercent + '% 100%';
                        clipX.pos = [ value - Math.abs(xMin), yMin, (zMax + zMin) / 2];
                    })

                    // 添加对Y剖面的控制
                    let rangeY = document.getElementById('rangeY');
                    rangeY.value = 0;
                    rangeY.setAttribute('min', 0);
                    rangeY.setAttribute('max', Math.abs(zMax) + Math.abs(zMin));

                    rangeY.addEventListener('input', function(e) {
                        let value = e.target.value;
                        let valueOfPercent = (Math.abs(value) / (Math.abs(zMax) + Math.abs(zMin))) * 100;
                        rangeY.style['background-size'] = valueOfPercent + '% 100%';
                        clipY.pos = [(xMax + xMin) / 2, yMin, value - Math.abs(zMin)];
                    })

                    // 添加对Z剖面的控制
                    let rangeZ = document.getElementById('rangeZ');
                    rangeZ.value = 0;
                    rangeZ.setAttribute('min', 0);
                    rangeZ.setAttribute('max', Math.abs(yMax) + Math.abs(yMin));

                    rangeZ.addEventListener('input', function(e) {
                        let value = e.target.value;
                        let valueOfPercent = (Math.abs(value) / (Math.abs(yMax) + Math.abs(yMin))) * 100;
                        rangeZ.style['background-size'] = valueOfPercent + '% 100%';
                        clipZ.pos = [(xMax + xMin) / 2, value - Math.abs(yMin), (zMax + zMin) / 2];
                    })

                    // checkBox事件
                    let checkX = document.getElementById('checkX');
                    let checkY = document.getElementById('checkY');
                    let checkZ = document.getElementById('checkZ');

                    checkX.addEventListener('click', function(e) {
                        xClipHelper.visible = !xClipHelper.visible;
                    })

                    checkY.addEventListener('click', function(e) {
                        yClipHelper.visible = !yClipHelper.visible;
                    })

                    checkZ.addEventListener('click', function(e) {
                        zClipHelper.visible = !zClipHelper.visible;
                    })
                }
            },
        },
        watch:{
            currentTool:{
                handler(newValue, oldValue) {
                    console.log("ddd")
                    console.log(newValue);
                    console.log(oldValue);
                },
                deep: true
            }
        },
        beforeCreate(){

        },
        created(){

        },
        beforeMount(){

        },
        mounted(){
            this.displayProfile();
        },
        beforeUpdate(){

        },
        updated(){

        },
        beforeDestroy(){

        },
        destroyed(){

        }
    }
</script>

<style scoped>
    @import "./css/profile.css";
</style>
